/**
 * @time 2024.01.12 15:42 星期五 晴
 * @target 做一个磁吸效果 上下左右磁吸 磁吸范围 磁吸距离 磁吸动画
 * 默认 : 磁吸效果 上下左右  可以设定 orientation : [top, left,button,right] (顺序 无所谓 最多取四个值 多的 可能 不大会写出效果)
 * 默认 : 磁吸范围 30px 可以设定 distance : "(Number)[px]" 可以不带 单位 将会用 getNum 进行取值
 * 默认 : 磁吸动画 关闭 直接 在magnet 元素周围 检测 x y 是否在 磁吸范围内  在 则 改变client top 或 left
 * 磁吸动画 : onlyOverMagnet : true  放手 后 才会 采用动画 根据 当前位置 和 磁吸 x y 进行平移 并 移除 cssvar
 */
import { initvd } from '../dragEl/vdrag';

import { injectFactory } from '../../../components/aaanewApp/globalLib/global';
import {
  ObjectOnlyPushSet,
  removeClass,
} from '../../../components/aaanewApp/global/global';
import { extendMagnetDataInfo } from './v_m_gravitation';
import { magenetJudgment } from './magenetJudgment';

const injectFacObj = injectFactory('v_D_M');

const injectFacUpObj = injectFactory('v_UP_M');

/**
 * drag_el drag 标识
 */
const dragIdentify = 'drag_el';

/**
 * magnet_el magnet 标识
 */
const magnetIdentify = 'magnet_el';

/**
 * magnet Impact 磁吸 冲积平原
 *
 * 所有信息 会在此存入
 *
 * 唯一值 是 元素的 id 名称
 */
let magnetImp = { data: [] };
/**
 * 元素 围绕 信息 默认是 surround  上下左右 全围绕 磁吸效果
 */
// let surroundObj = { data: [] };

// /**
//  * class 对应字段
//  */
// let regClass = /[^\w]?\.(?<Classname>.*)/;

// /**
//  * ID 对应字段
//  */
// let regID = /[^\w]?#(?<IDName>.*)/;

function magnetFunc(dragel, bind) {
  /**
   * 让该元素 可移动
   */
  initvd(dragel);

  // 升级 drag_el 为 magnet_el
  removeClass(dragel, dragIdentify);
  removeClass(dragel, magnetIdentify, true);

  //注册 magnet 新事件
  injectInfact();

  //   注入 magnet 信息
  injectMagnetImp(dragel, bind);
}

/**
 * 注入 magnet 信息
 * @param {Element} element 磁吸元素
 * @param {Object} bind 绑定事件
 * @returns {Boolean} 返回 注入 是否成功
 */
function injectMagnetImp(element, bind) {
  console.log(element, bind);

  let elID = element.id;
  if (elID == undefined) {
    console.log('sorry your magnet El no ID');
    return false;
  }

  //   添加 magnet 属性  属性内容 为 element 的 ID
  element.setAttribute('magnet', elID);

  //   解析 吸附区域 和 __吸附线__ 相关 数据
  let extendedInfo = extendMagnetDataInfo(bind['value']);
  //   console.log(extendedInfo);

  //   添加信息
  if (!ObjectOnlyPushSet(magnetImp, elID, extendedInfo)) {
    return false;
  }
  return true;
}

/**
 * 相关 注册事件 --总集
 */
function injectInfact() {
  let currentOp;
  let followEl;

  injectFacObj.getstatus = (event) => {
    if (event.target.classList.contains(dragIdentify)) {
      //   if (injectFacObj['injectfunca'] != undefined) {
      return false;
      //   }
    }
    if (event.target.classList.contains(magnetIdentify)) {
      if (injectFacObj['injectfunca'] != undefined) {
        return true;
      }
    }

    return false;
  };

  injectFacObj.inject((event) => {
    if (currentOp == undefined) {
      currentOp = injectFacObj.getProps('currentOp');
    }
    if (followEl == undefined) {
      followEl = injectFacObj.getProps('followEl');
    }
    // console.log(event.pageY);
    const top = event.pageY - currentOp['clientTop'] + currentOp['moveY'];
    const left = event.pageX - currentOp['clientLeft'] + currentOp['moveX'];
    followEl(top, left);
    currentOp['top'] = top;
    currentOp['left'] = left;
    magenetJudgment(currentOp);
  });
  console.log(injectFacObj);

  injectFacUpObj.getstatus = (event) => {
    console.log(event);
    return true;
  };
  injectFacUpObj.inject((event) => {
    console.log('注入事件', event);
  });
  injectFacUpObj.getProps();
}

// /**
//  * 修订 currentOp 的 moveX,Y 这个是偏移量 默认是 0
//  * @param {X|Y} XY ["X","Y","x","y"] 但限制 [x,y]  大小写 都行
//  * @param {*} offset
//  */
// function reverseMoveXY(XY, offset) {
//   if (['X', 'Y', 'x', 'y'].indexOf(XY) > -1) {
//     if (['x', 'X'].indexOf > -1) {
//       currentOp['moveX'] = getNum(offset);
//     } else {
//       currentOp['moveY'] = getNum(offset);
//     }
//   }
//   console.log(
//     'error your XY is not allowed Value: ' +
//       XY +
//       " it must be in ['X','Y','x','y']"
//   );
// }

// /**
//  * 根据 id 或 class  获取到相关元素
//  * @param {Array} elArr 获取到的 element class id
//  */
// function getElArrElement(elArr) {
//   let groups;
//   let ElementObj = { data: [...elArr] };
//   for (let i = 0; i < elArr.length; i++) {
//     groups = regClass.exec(elArr[i]);
//     if (groups != undefined) {
//       ElementObj[elArr[i]] = document.getElementsByClassName(
//         groups['groups']['Classname']
//       )[0];
//     } else {
//       groups = regID.exec(elArr[i]);
//       ElementObj[elArr[i]] = document.getElementById(
//         groups['groups']['IDName']
//       );
//     }
//   }
//   return ElementObj;
// }

/**
 * 获取 当前 的 所有扩展领域
 *
 * 可以进行 热更新 扩展吸附领域
 * @param {Boolean} renew 是否启用热更新 将 部分 不在线 的信息 进行删除
 * @returns --{object}  所有元素 扩展的 吸附领域
 */
function getmagnetImp(renew) {
  if (renew) {
    let el_i;
    for (let i = 0; i < magnetImp['data'].length; i++) {
      if (magnetImp['data'][i] == 'global') {
        continue;
      }
      el_i = document.getElementById(magnetImp['data'][i]);

      // 如果当前元素 还存在 或者 为 global 全局 作用域下
      if (el_i != undefined) {
        continue;
      }
      // 删除 当前页面 未有 元素 的 吸附作用域
      delete magnetImp[magnetImp['data'][i]];
      magnetImp['data'].splice(i, 1);
    }
  }
  return magnetImp;
}

export { magnetFunc, getmagnetImp };
